<!--智能设备-->
<template>
  <a-card
    style="height: 100%; width: 100%; display: flex; flex-direction: column"
    :bodyStyle="{flex: 1,height: 0, padding: ' 12px 18px 0'}"
  >
    <template #title>
      <cu-icon class="icon-primary" type="org-shebei" />
      智能设备
    </template>
    <template #extra>
      <a-button
        type="link"
        size="small"
        v-permission="['contractList', 'curd', 'list']"
        @click="$utils.goAppRoute('workIOT', 'iot')">更多&nbsp;&gt;</a-button>
    </template>
    <a-spin :spinning="spinning">
      <div class="device-box">
        <!--   list   -->
        <div class="select-list">
          <div
            class="select-item"
            :class="activeSelect === index + 1 ? 'active-select' : ''"
            v-for="(item, index) in selectList"
            :key="index"
            @click="changeType(index)"
          >
            {{item.name}}
          </div>
        </div>
        <div class="select-view">
          <div class="list-item" v-for="(item, index) in viewList" :key="index">
            <a-tooltip placement="top" :title="item.num">
              <div class="item-num" :style="{color: item.color}">{{item.num}}</div>
            </a-tooltip>
            <div class="list-dec">{{item.title}}</div>
          </div>
        </div>
      </div>
    </a-spin>
  </a-card>
</template>
<script>
import {
  defineComponent,
  ref,
  computed,
  watch,
  onMounted,
  reactive,
  nextTick, toRefs,
} from "vue";
import {
  QuestionCircleOutlined,
  MenuOutlined,
  DownloadOutlined,
  FormOutlined,
  DeleteOutlined,
  CheckSquareOutlined,
  PlusOutlined,
  CaretDownOutlined,
} from "@ant-design/icons-vue";
import {Empty, message, Modal, Progress} from "ant-design-vue";
import { Chart } from "@antv/g2";
import request from "../../../common/utils/request";
import { tuple } from "ant-design-vue/lib/_util/type";
import moment from "moment";
import utils from "@/common/utils/utils";

export default defineComponent({
  name: "smartDevice",
  components: {
  },
  setup(props, context) {

    const state = reactive({
      spinning: false,
      activeSelect: 1,
      listTimer: null,
      selectList: [
        {
          name: '电表',
        },
        {
          name: '水表',
        },
        {
          name: '摄像头',
        },
        {
          name: '门锁',
        },
        {
          name: '门禁',
        },
      ],
      viewList: [
        {
          title: '数量',
          num: 0,
          color: '#f7b500',
        },
        {
          title: '在线',
          num: 0,
          color: '#3ac240',
        },
        {
          title: '离线',
          num: 0,
          color: '#f44745',
        },

      ]
    })

    const getData = () => {
      clearTimeout(state.listTimer);
      state.listTimer = setTimeout(() => {
        state.spinning = true;
        request.get("/org", "/workbench/iotAiStatistics", {tab: state.activeSelect}).then((res) => {
          state.viewList.forEach((item) => {
            if (item.title === '数量') {
              item.num = res?.intData?.totals || 0;
            }
            if (item.title === '在线') {
              item.num = res?.intData?.onlineTotal || 0;
            }
            if (item.title === '离线') {
              item.num = res?.intData?.offlineTotal || 0;
            }
          })
          state.spinning = false;
        }).catch((err) => {
          state.spinning = false;
        })
      }, 500)
    };


    getData();


    const changeType = (index) => {
      state.activeSelect = index + 1;
      getData();
    }


    return {
      ...toRefs(state),
      changeType,
    };
  },
});
</script>

<style lang="less" scoped>
:deep(.ant-progress-text) {
  color: #666;
}
.device-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.select-list {
  width: 100%;
  height: 30px;
  background-color: #f7f7f7;
  border-radius: 30px;
  display: flex;
  .select-item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
}
.active-select {
  background-color: @primary-color;
  color: #fff;
  border-radius: 30px;
}
.select-view {
  flex: 1;
  padding: 24px 20px;
  display: flex;
  justify-content: space-between;
  .list-item {
    display: flex;
    max-width: 33%;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    .item-num {
      font-size: 24px;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-break: break-all;
    }
  }
}
.icon-primary {
  color: @primary-color;
  font-size: 18px;
}
:deep(.ant-spin-nested-loading) {
  height: 100%;
}
:deep(.ant-spin-container) {
  height: 100%;
}


</style>